<html>

  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="UTF-8">

    <title>TESTing new JS Stuff</title>
    
    <script type="text/javascript"
      src="http://www.google.com/jsapi"></script>

    <script>

      //First load the visualization lib
      google.load('visualization', '1');
      
      // Not sure why I need to specifically load this package too
      // in addition to the library
      google.load('visualization', '1', { packages: ['table'] });


      // This function makes the array of locations
      function formLocationList() {
        
        // Form the query for the location name
        var query = "SELECT 'Specific Location' ";
        query += "FROM 110yPR0tglVbjAHiXL_DNOcXriZGgdWG7lpyPiZM";

        //alert("SQL Query = " + query);

        // Make a url query, for google viz API
        query = encodeURIComponent(query);
        var gvizQuery = new google.visualization.Query(
          'http://www.google.com/fusiontables/gvizdata?tq=' + query);

        // Send query and handle response
        gvizQuery.send(function(response) {
          var numRows = response.getDataTable().getNumberOfRows();


          // LOOKING AT SIZE OF DATA TABLE
          /*
          var nrows = response.getDataTable().getNumberOfRows();
          var ncols = response.getDataTable().getNumberOfColumns();

          alert("nrows = " + nrows + 
                "; and ncols = " + ncols);

          document.getElementById("blah").innerHTML = 
            response.getDataTable().toJSON();

          */

          // GETTING A SINGLE VALUE
          // // var loc = response.getDataTable().getValue(0, 0);
          // // alert( "loc = " + loc );


          // For each row in the table, add location name to list
          // as long as the name is not already there
          var locArray = new Array();
          for (var i = 0; i < numRows; i++) {
            
            var loc = response.getDataTable().getValue(i, 0);

            var is_duplicate = false;
            for (var j = 0; j < locArray.length; j++) {
              if ( loc == locArray[j] )
              {
                is_duplicate = true;
              }
            }

            if ( !is_duplicate )
            {
              locArray.push(loc);
            }
            
          }

          // List the unique locations
          document.getElementById("blah").innerHTML =
            locArray.join(",<br />");

          // Populate the select box with unique locations
          var select = document.getElementById('locSelect');
          for (var i = 0; i < locArray.length; i++ )
          {
            var l = select.options.length;
            var t = locArray[i];
            select.options[l] = new Option(t,t);
          }

          // Show the full table for reference
          var dTab = response.getDataTable();
          
          // Assign the table viz to the spot on the page
          var table = new google.visualization.Table(
            document.getElementById('gtable'));

          // Make the viz draw the table
          table.draw(dTab, {
            showRowNumber: true
          });
        });
        
      }

      // I think this is just the general initialization
      // for google functions -- not 100% sure tho 
      google.setOnLoadCallback(formLocationList); 

      function f(x)
      {
        var y=5;
        var v = new Array();
        v[0] = x;
        v[1] = y;
        return v;
      }

      function disp(x)
      {
        var v = f(x);
        var d_str = "vector = ";
        for (var i =0; i < v.length; i++) {
          d_str += v[i];
        }

        alert(d_str);
      }

    </script>

  </head>

  <body>
    <div id="map-canvas"></div>
    <label>Delivers?</label>
    <select id="delivery">
      <option value="">--Select--</option>
      <option value="yes">Yes</option>
      <option value="no">No</option>
    </select>
    <p id="p1">
      New paragraph
    </p>
    <p id="p2">
    2^{nd} paragraph
    </p>
    <button onclick="disp('me')">Try it</button>
    <br><br>

    <label>Location?</label>
    <select id="locSelect">
      <option value="">--Select--</option>
    </select>

    <div id="blah"></div>
    <br><br>
    <div id="gtable"></div>
  </body>
</html>
